<template>
<div>
  <div class="top">
    <p>朋友</p>
    <li>
      <img src="../assets/img/user/friend.png" alt="">
      <img src="../assets/img/user/jiahao.png" alt="">
    </li>
  </div>
  <div class="list">
      <li>
        <img src="../assets/img/user/life_1.png" alt="">
        <p>生活号</p>
        <span>你有新通知</span>
      </li>
      <li>
          <img src="../assets/img/user/program.png" alt="">
          <p>小程序</p>
          <span>发现更多服务</span>
      </li>
      <li>
          <img src="../assets/img/user/life.png" alt="">
          <p>生活圈</p>
          <span>你有...新动态</span>
      </li>
  </div>
  <div class="space"></div>
  <div class="friend" @click="chat">
    <img src="../assets/img/user/timg.jpg" alt="">
    <li>
      <p>陌生人</p>
      <span>{{this.global.list[this.global.list.length-1].text}}</span>
    </li>
    <p>11:34</p>
  </div>

</div>  
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    chat(){
      this.$router.push("chat" +"?" +  "id=1")
    }
  }
}
</script>

<style lang="less" scoped>
.space{
  height: 10px;
  background-color: #f6f6f6;
}
.top{
  background-color: #1c81cf;
  height: 40px;
  display: flex;
  align-items: center;
  p{
    margin: 0;
    color: #fff;
    margin-left: 40%;
  }
  li{
    display: flex;
    margin-left: auto;
      img{
      width: 20px;
      height: 20px;
      background-size: 100%;
      margin-right: 20px;
    }
  } 
  
}
.list{
  display: flex;
  text-align: center;
  height: 100px;
  li{
    display: flex;
    width: 33.3%;
    flex-wrap: wrap;
    margin-top: 10px;
    img{
      width: 40px;
      height: 40px;
      margin: 0 auto;
    }
    p{
      width: 100%;
      margin: 0;
      margin: 3px auto;
      color: #000;
      font-size: 13px;                                 
    }
    span{
      margin: 0 auto;
      color: #7a7a7a;
      font-size: 12px;
      margin-bottom: 15px;
    }
  }
}
.friend{
  display: flex;
  height: 70px;
  border-bottom: 2px solid #f6f6f6;
  align-items: center;
  img{
    width: 50px;
    height: 50px;
    margin-left: 10px;
  }
  li{
    width: 70%;
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    // align-content: center;
    font-size: 14px;
    p{
      margin: 0;
      width: 100%;
      color: #000;
    }
    span{
      margin-top: 5px;
      color: #7a7a7a;
    }
  }
  p{
    font-size: 13px;
    color: #7a7a7a;
  }
}
</style>